<template>
  <div class="dashboard-container">
    <!-- 导航栏 -->
    <van-nav-bar title="智能排课系统" />
    
    <!-- 用户信息卡片 -->
    <van-cell-group class="user-card">
      <van-cell 
        :title="`欢迎，${userStore.userInfo.nickname || userStore.userInfo.username}`"
        :label="userStore.userInfo.role === 'admin' ? '管理员' : '普通用户'"
        is-link
        @click="logout"
      >
        <template #right-icon>
          <van-icon name="sign-out" />
        </template>
      </van-cell>
    </van-cell-group>
    
    <!-- 功能菜单 -->
    <div class="menu-grid">
      <div class="menu-item" @click="router.push('/calendar')">
        <van-icon name="calendar-o" />
        <span>日历查看</span>
      </div>
      
      <div class="menu-item" @click="router.push('/schedule')">
        <van-icon name="orders-o" />
        <span>排课管理</span>
      </div>
      
      <div class="menu-item" @click="router.push('/master/teacher')">
        <van-icon name="friends-o" />
        <span>教师管理</span>
      </div>
      
      <div class="menu-item" @click="router.push('/master/course')">
        <van-icon name="bookmark-o" />
        <span>课程管理</span>
      </div>
      
      <div class="menu-item" @click="router.push('/master/class')">
        <van-icon name="home-o" />
        <span>班级管理</span>
      </div>
      
      <div class="menu-item" @click="router.push('/master/venue')">
        <van-icon name="location-o" />
        <span>场地管理</span>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="wap-home-o" to="/dashboard">首页</van-tabbar-item>
      <van-tabbar-item icon="calendar-o" to="/calendar">日历</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/schedule">排课</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/master/teacher">管理</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showConfirmDialog, showToast } from 'vant'

const router = useRouter()
const userStore = useUserStore()
const activeTab = ref(0)

const logout = async () => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: '确定要退出登录吗？',
    })
    
    userStore.logout()
    showToast('退出成功')
    router.push('/login')
  } catch {
    // 用户取消
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding-bottom: 50px; // 为底部导航留出空间
}

.user-card {
  margin: $padding-md;
  border-radius: $border-radius-lg;
  overflow: hidden;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $padding-md;
  padding: $padding-md;
}

.menu-item {
  background: white;
  border-radius: $border-radius-lg;
  padding: $padding-lg;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.95);
  }
  
  .van-icon {
    font-size: 24px;
    color: $primary-color;
    margin-bottom: 8px;
  }
  
  span {
    display: block;
    font-size: $font-size-sm;
    color: $text-color;
  }
}
</style>